<template>
  <!-- 病人列表 -->
  <el-dialog title="患者列表" :visible="value" width="718px" custom-class="dialog-box" @close="onClose" @open="onOpen" :close-on-click-modal="false" :append-to-body="true">
    <ul class="ul-box">
      <li v-for="(item,index) in tableList" :key="index" @click="onClick(item)">
        <img v-if="item.head" :src="item.head|imageUrl" alt="">
        <img v-else src="@/img/unknown-avatar.png" alt="">
        <div class="overflow-omit" style="margin-top:2px;">{{item.name}}</div>
        <div style="margin-top:2px;">{{item.sex|toSex}}&nbsp;{{item.age}}岁</div>
        <div style="margin-top:2px;">{{item.mobil}}</div>
      </li>
    </ul>
    <pager v-model="pager" @change-pagenum="getData"></pager>
  </el-dialog>
</template>
<script>
export default {
  props: ["name", "value"],
  data() {
    return {
      tableList: [],
      pager: { pageSize: 10, pageNum: 1, total: 0 }
    };
  },
  methods: {
    getData() {
      let th = this;
      let j = {
        nameOrMobile: th.name,
        hpId: th.adminUser.hpId
      };
      Object.assign(j, th.pager);
      th.$api.getThePatientLibraryList(j).then(res => {
        if (res.executed) {
          th.tableList = res.dataBody.list;
          th.pager.total = res.dataBody.total;
        }
      });
    },
    onClick(obj) {
      let th = this;
      let id = th.jiaMi(obj.patientId);
      let url = "/page/userDetail";
      if (th.verifyUrl("/page/patientList")) {
        th.onClose();
        th.addNavMenu("病人库", url,'userDetail');
        th.$router.push({
          path: url,
          query: th.getUrlToken({
            id: id
          })
        });
      }
    },
    onOpen() {
      let th = this;
      th.pager.pageNum = 1;
      th.getData();
    },
    onClose() {
      let th = this;
      th.tableList = [];
      th.$emit("input", false);
    }
  }
};
</script>
<style lang="scss" scoped>
.ul-box {
  margin: 0;
  padding: 0;
  > li {
    width: 120px;
    margin-right: 15px;
    margin-bottom: 15px;
    text-align: center;
    border: 1px solid #eee;
    border-radius: 5px;
    float: left;
    cursor: pointer;
    padding: 15px;
    list-style: none;
    overflow: hidden;
    &:hover {
      box-shadow: 0 0 5px 2px #ccc inset;
    }
    &:nth-child(5n) {
      margin-right: 0;
    }
    img {
      width: 100%;
      height: 90px;
      object-fit: cover;
    }
    >div{
      height: 20px;
    }
  }
  &::after {
    display: block;
    content: "";
    clear: both;
  }
}
</style>